<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>老板雷达</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="assets/css/icons.css?v=2.3">
</head>
<body class="bg-gray">
<!--<header data-am-widget="header" class="am-header am-header-default am-header-fixed ">

    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)" class="widht-10s">
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        老板雷达
    </h1>


</header>-->
<section class="" id="amz-main" data-tag="css-nav">
    <div data-am-widget="tabs" class="am-tabs am-tabs-d2" data-am-tabs-noswipe="1">
        <div class=" font-color-2 my-menu-lists bg-white  am-padding-left-sm" >
            <div class="box border-bottom" onclick="changeDepart()" v-cloak>
                <div class="width-25px am-margin-right-sm ">
                    <i class="my-icon my-icon-pu01"></i>
                </div>
                <div class="box-1  ">
                    <span class="prelative" id="depart"></span>
                </div>
            </div>
        </div>
        <ul class="am-tabs-nav  bg-gray-3  bg-blue">
            <li class="am-active" id="all"><a href="[data-tab-panel-0]">总览</a></li>
            <li class="" id="sale"><a href="[data-tab-panel-1]">销售排行</a></li>
            <li class="" id="ability"><a href="[data-tab-panel-2]">能力分析</a></li>
        </ul>
        <div class="am-tabs-bd">
            <div   class="am-tab-panel am-active">
                <div id="tabs" data-am-widget="tabs" class="am-tabs am-tabs-d2">
                    <ul class="am-tabs-nav am-cf">
                        <li class="all"><a href="#content">汇总</a></li>
                        <li class="daybefore"><a href="#content" >昨天</a></li>
                        <li class="weekbefore"><a href="#content" >近7天</a></li>
                        <li class="monthbefore"><a href="#content" >近30天</a></li>
                    </ul>
                    <div class="am-tabs-bd">
                        <div id="content" class="am-tab-panel am-active">
                            <div class="am-g am-padding-top-slg am-padding-left-xs am-padding-right-xs" id="view" v-cloak>
                                <div class="am-u-sm-4 data-list">
                                    <div class="layui-card">
                                        <div class="max-number-font">{{view[0].now_num}}</div>
                                        <div class="percentage-font">{{uppre(view[0].last_num,view[0].now_num,type)}}</div>
                                        <div class="min-font">{{view[0].desc}}</div>
                                    </div>
                                </div>
                                <div class="am-u-sm-4 data-list">
                                    <div class="layui-card">
                                        <div class="max-number-font">{{view[1].now_num}}</div>
                                        <div class="percentage-font">{{uppre(view[1].last_num,view[1].now_num,type)}}</div>
                                        <div class="min-font">{{view[1].desc}}</div>
                                    </div>
                                </div>
                                <div class="am-u-sm-4 data-list">
                                    <div class="layui-card">
                                        <div class="max-number-font">{{view[2].now_num}}</div>
                                        <div class="percentage-font">{{uppre(view[2].last_num,view[2].now_num,type)}}</div>
                                        <div class="min-font">{{view[2].desc}}</div>
                                    </div>
                                </div>
                                <div class="am-u-sm-4 data-list">
                                    <div class="layui-card">
                                        <div class="max-number-font">{{view[3].now_num}}</div>
                                        <div class="percentage-font">{{uppre(view[3].last_num,view[3].now_num,type)}}</div>
                                        <div class="min-font">{{view[3].desc}}</div>
                                    </div>
                                </div>
                                <div class="am-u-sm-4 data-list">
                                    <div class="layui-card">
                                        <div class="max-number-font">{{view[4].now_num}}</div>
                                        <div class="percentage-font">{{uppre(view[4].last_num,view[4].now_num,type)}}</div>
                                        <div class="min-font">{{view[4].desc}}</div>
                                    </div>
                                </div>
                                <div class="am-u-sm-4 data-list">
                                    <div class="layui-card">
                                        <div class="max-number-font">{{view[5].now_num}}</div>
                                        <div class="percentage-font">{{uppre(view[5].last_num,view[5].now_num,type)}}</div>
                                        <div class="min-font">{{view[5].desc}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="am-g am-padding-top-slg am-padding-left-xs am-padding-right-xs">

                                <div class="am-u-sm-12 data-list-tow">
                                    <div class="layui-card" id="gjline" style="height: 250px;width: 100%">

                                    </div>
                                </div>
                                <div class="am-u-sm-12 data-list-tow">
                                    <div class="layui-card" id="zxline" style="height: 250px;width: 100%">

                                    </div>
                                </div>
                                <div class="am-u-sm-12 data-list-tow">
                                    <div class="layui-card" id="xzline" style="height: 250px;width: 100%s">

                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div   class="am-tab-panel ">
                <div id="users" v-cloak>
                    <div v-for="user in users">
                        <div class="am-g am-benj">
                            <div class="bg-white font-14 am-padding-left-sm am-padding-top-sm am-padding-bottom-sm padding-right-2rems prelative am-listborder">
                                <div class="box ">
                                    <div class="width-25px am-margin-right-sm ">
                                        <!--<i class="my-icon my-icon-11"></i>-->
                                    </div>
                                    <div class="width-45px"><img v-bind:src="user.head_icon" style="height: 50px"
                                                                 class="am-img-responsive border-circle"></div>
                                    <div class="box-1">
                                        <div class="font-16 font-color-2 am-listcent">{{user.name}}</div>
                                    </div>
                                </div>

                                <div class="icon-cont-right font-14">{{user.user_num}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div   class="am-tab-panel  ">
                <!--hxq-->
                <div class="am-g am-padding-top-slg am-padding-left-xs am-padding-right-xs" id="radars">
                   <!-- <div class="am-u-sm-12 data-list-tow">
                        <div class="layui-card">
                            <div class="box ">
                                <div class="width-60px relative"><i class="one-ico one"></i><img
                                        src="assets/images/uploads/tu_8.png" class="am-img-responsive border-circle">
                                </div>
                                <div class="box-1 am-margin-left-sm am-text-left">
                                    <div class="font-color-2 am-margin-top-xs font-18">陈陈</div>
                                    <div class="font-color-1 font-14">冠军</div>
                                </div>
                            </div>
                            <div class="tu-piodata">
                                <img src="assets/images/uploads/tu001.jpg">
                            </div>
                        </div>
                    </div>-->
                </div>
            </div>
        </div>
    </div>
</section>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/vue2.2.2.min.js"></script>
<script src="assets/js/echarts.js"></script>
<script src="assets/common.js"></script>

<link rel="stylesheet" href="assets/js/layui/css/layui.css">
<script type='text/javascript' src='assets/js/layui/layui.js'></script>
<script>
    var code = getQueryString("code"); //企业微信传过来的code  用户获取用户信息
    var sessionid = getQueryString("sessionid"); //
    var enterpriseid = getQueryString("enterpriseid");//企业微信传过来的企业id  用户区分不同的企业
    var departid = getQueryString("departid");//部门id，选择部门的时候传过来的参数
    var type = 1;//  1汇总2昨日3近七天4近30天
    var days=30;
    var eventHub = new Vue();
    var mask;
    var salecount=0;
    var ablicount=0;
    layui.use('layer', function(){
        var layer = layui.layer;
    });

    $("#tabs li").click(function(){
        $("#tabs li").removeClass("am-active");
        $(this).addClass("am-active");
    });
    $('.daybefore').on('click', function() {
        regetData(2,1);
        return;
    });
    $('.weekbefore').on('click', function() {
        regetData(3,7);
    });
    $('.monthbefore').on('click', function() {
        regetData(4,30);
    });
    $('.all').on('click', function() {
        regetData(1,30);
    });
/*    $("#all").on('click',function(){
        alert(1)
    })*/
    $("#sale").on('click',function(){

        if (salecount==0){
            //排序
            sort(departid);
            salecount++
        }

    })
    $("#ability").on('click',function(){
        if(ablicount==0)
        {
            //能力分析
            analyse(departid);
            ablicount++
        }

    })
    $(function () {
        setTimeout(function(){
            mask = layer.msg('正在加载', {icon: 16});
            if (sessionid!=null){
                if (departid==null){
                    departid=1
                }
                //获取部门名称
                enterpriseinfo(departid);
                console.log(sessionid)
                //各种图。。。
                sumcharts(departid,days);
                //数据概览
                dataview(type)
            }else{
                bossUserInfo();
            }

        },200)

    })

    /**
     * 获取用户信息及权限 无权限则跳转
     */
    function bossUserInfo() {
        $.ajax({
            type: 'POST',
            url: baseUrl + 'v3.0/login/boss?code=' + code+'&enterpriseid='+enterpriseid,
            contentType: 'application/json',
            success: function (data) {
                //无权限 则跳转
                if (data == 0) {
                    window.location.href = "企业微信/没有权限.html";
                }
                //有权限
                else {
                    if (departid==null){
                        departid=1
                    }
                    sessionid = data;
                    //获取部门名称
                    enterpriseinfo(departid);
                    console.log(sessionid)
                    //各种图。。。
                    sumcharts(departid,days);
                    //数据概览
                    dataview(type)


                }
            }
        })
    };

    /**
     *获取企业信息
     */
    function enterpriseinfo(deptid){
        $.ajax({
            url:baseUrl+'v3.0/departname?id='+deptid,
            type:'get',
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            success:function (data) {
                $("#depart").html(data)

            }

        })
    }

    /**
     * 切换部门
     */
    function changeDepart(){
        window.location.href = "老板雷达/切换部门.html?sessionid=" + sessionid;
    }

    //------------------总览-------------------------------
    /**
     * 页面上部分的数据  对比。。。
     */
    function dataview(type) {
        eventHub.type=type;
        $.ajax({
            url: baseUrl + 'v3.0/boss/index/view?type='+type+'&department_id='+departid,
            type: 'GET',
            contentType: 'application/json',
            //data: JSON.stringify(page),
            headers: {'session_id': sessionid},
            success: function (result) {
                layer.close(mask);
                eventHub=new Vue({
                    el: "#view",
                    data: {
                        view: result,
                        type:type
                    },
                    methods: {
                        uppre: function (a, b,t) {
                            if (t!=1){
                                if (a == 0) {
                                    return '无对比'
                                } else {
                                    return ((b - a) / a * 100).toFixed(2) + '%'
                                }
                            }else
                            {
                                return ''
                            }
                        }

                    }
                })
            }
        })
    }

    /**
     * 时间切换
     */
    function regetData(type,days) {
        mask = layer.msg('正在加载', {icon: 16});
        $.ajax({
            url: baseUrl + 'v3.0/boss/index/view?type='+type+'&department_id='+departid,
            type: 'GET',
            contentType: 'application/json',
            //data: JSON.stringify(page),
            headers: {'session_id': sessionid},
            success: function (results) {
                eventHub.view=results;
                eventHub.type=type;
                if(type!=2){
                    sumcharts(departid,days);
                }

                layer.close(mask);

            }
        })
    }

    /**
     * 各种图汇总
     */
    function sumcharts(depart,day) {
        gjline(depart,day);
        zxline(depart,day);
        xzline(depart,day);
    }
    /**
     * 查询用户跟进新增情况
     */
    function gjline(dept,day) {
        $.ajax({
            url: baseUrl + 'v3.0/boss/index/attach?day='+day+'&department_id='+dept,
            type: 'GET',
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            success: function (result) {

                var legend = [];
                var data = [];
                for (item in result) {
                    legend.push(result[item].name);
                    data.push(result[item].value)
                }
                var optionline = {
                    title : {
                        text: '跟进用户',
                        x:'center'
                    },
                    color: [ '#37A2DA'],
                    calculable: true,
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        top: '20%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: legend
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false //不显示网格
                            }
                        }
                    ],
                    series: [
                        {
                            name: '最高气温',
                            type: 'line',
                            data: data,
                            itemStyle : { normal: {label : {show: true}}},
                            symbol:'none',  //这句就是去掉点的
                            smooth:true  //这句就是让曲线变平滑的
                        }
                    ]
                };
                charts(optionline,'gjline')



            }

        })
    }

    /**
     * 查询用户咨询新增情况
     */
    function zxline(dept,day) {
        $.ajax({
            url: baseUrl + 'v3.0/boss/index/im?day='+day+'&department_id='+dept,
            type: 'GET',
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            success: function (result) {

                var legend = [];
                var data = [];
                for (item in result) {
                    legend.push(result[item].name);
                    data.push(result[item].value)
                }
                var optionline = {
                    calculable: true,
                    title : {
                        text: '咨询用户',
                        x:'center'
                    },
                    color: [ '#37A2DA'],
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        top: '20%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: legend
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false //不显示网格
                            }
                        }
                    ],
                    series: [
                        {
                            name: '最高气温',
                            type: 'line',
                            data: data,
                            itemStyle : { normal: {label : {show: true}}},
                            symbol:'none',  //这句就是去掉点的
                            smooth:true  //这句就是让曲线变平滑的
                        }
                    ]
                };
                charts(optionline,'zxline')



            }

        })
    }

    /**
     * 查询用户新增情况
     */
    function xzline(dept,day) {
        $.ajax({
            url: baseUrl + 'v3.0/boss/index/user?day='+day+'&department_id='+dept,
            type: 'GET',
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            success: function (result) {

                var legend = [];
                var data = [];
                for (item in result) {
                    legend.push(result[item].name);
                    data.push(result[item].value)
                }
                var optionline = {
                    calculable: true,
                    title : {
                        text: '新增用户',
                        x:'center'
                    },
                    color: [ '#37A2DA'],
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        top: '20%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: legend
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false //不显示网格
                            }
                        }
                    ],
                    series: [
                        {
                            name: '最高气温',
                            type: 'line',
                            data: data,
                            itemStyle : { normal: {label : {show: true}}},
                            symbol:'none',  //这句就是去掉点的
                            smooth:true  //这句就是让曲线变平滑的
                        }
                    ]
                };
                charts(optionline,'xzline')


            }

        })
    }


    //--------------------销售排行--------------------------------
    /**
     * 销售排行
     */
    function sort(dept) {
        mask = layer.msg('正在加载', {icon: 16});
        $.ajax({
            url: baseUrl + 'v3.0/boss/staff/order?department_id='+dept,
            type: 'GET',
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            success: function (users) {
                for(var j=0;j<users.length-1;j++){
                    //两两比较，如果前一个比后一个大，则交换位置。
                    for(var i=0;i<users.length-1-j;i++){
                        if(users[i].user_num<users[i+1].user_num){
                            var temp = users[i];
                            users[i] = users[i+1];
                            users[i+1] = temp;
                        }
                    }
                }
                layer.close(mask);
                new Vue({
                    el: "#users",
                    data: {
                        users: users
                    }
                })
            }
        })
    }
    //--------------能力分析----------------------------------
    function analyse(dept) {
        mask = layer.msg('正在加载', {icon: 16});
        $.ajax({
            url: baseUrl + 'v3.0/boss/staff/analysis?department_id='+dept,
            type: 'get',
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            success: function (result) {
                layer.close(mask);
                var indicator = [];//标准值
                for (var i in result) {
                    var item = {text: '', max: 0}
                    if (i != 'staffs') {

                        item.max = result[i]
                        if(i=="max_v1"){
                            item.text = '获客能力';
                        }else if(i=="max_v2"){
                            item.text = '个人魅力值';
                        }else if(i=="max_v3"){
                            item.text = '销售主动性';
                        }else if(i=="max_v4"){
                            item.text = '客户互动值';
                        }else if(i=="max_v5"){
                            item.text = '官网推广值';
                        }else if(i=="max_v6"){
                            item.text = '产品推广值';
                        }

                        indicator.push(item);
                    }
                }
                for (var i in result.staffs) {
                    //取到每个用户的值
                    var userValue = []
                    for (var j in result.staffs[i]) {
                        if (!isuserInfo(j)) {
                            userValue.push(result.staffs[i][j])
                        }
                    }
                    //获取到每个用户的 echarts的option
                    var radaroption = raderoption(indicator, userValue,getNum(i).isshow)
                    //为每一个用户初始化div容器
                    var html="<div class='am-u-sm-"+getNum(i).value+" data-list-tow'>"
                        +"<div class='layui-card'>"
                        +"<div class='box '>"
                        +"<div class='width-60px relative'><i class='"+getNum(i).class+"'></i><img"
                        +" style='height: 63px' src='"+result.staffs[i].head_icon+"' class='am-img-responsive border-circle'>"
                        +"</div>"
                        +"<div class='box-1 am-margin-left-sm am-text-left'>"
                        +"<div class='font-color-2 am-margin-top-xs font-18'>"+result.staffs[i].name+"</div>"
                        +"<div class='font-color-1 font-14'>"+getNum(i).name+"</div>"
                        +"</div>"
                        +"</div>"
                        +"<div style='height: "+getNum(i).height+"px' class='tu-piodata' id='_"+result.staffs[i].id+"'>"
                        +"</div>"
                        +"</div>"
                        +"</div>"
                    layer.close(mask);
                    $("#radars").append(html)
                    //将数据填充到每个div中
                    charts(radaroption, '_'+result.staffs[i].id);
                }


            }

        })
    }
    //获取排名 div大小等。。。
    function getNum(i){
        var k=1+i*1
        if(i==0){
            return {name:'冠军',value:'12',class:'one-ico one',height:'250',isshow:true}
        }
        if(i==1){
            return {name:'亚军',value:'6',class:'one-ico tow',height:'150',isshow:false}
        }
        if(i==2){
            return {name:'季军',value:'6',class:'one-ico three',height:'150',isshow:false}
        }else{
            return {name:'第'+k+'名',value:'6',height:'150',isshow:false}
        }
    }
    //判断当前属性是否是用户信息
    function isuserInfo(o) {
        if (o == 'department_id') {
            return true;
        }
        if (o == 'head_icon') {
            return true;
        }
        if (o == 'id') {
            return true;
        }
        if (o == 'name') {
            return true;
        } else {
            return false;
        }
    }
    function raderoption(indicator, userValue,isshow) {
        return {
            radar:[{
                indicator: indicator,
                center: ['50%', '50%'],
                name:{
                    show:isshow
                }
            }],
            color: [ '#37A2DA'],
            calculable: true,
            name: {
                show:false
            },
            series: [
                {
                    name: '测试',

                    type: 'radar',
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: [
                        {
                            value: userValue,
                            name: '测试1'
                        }
                    ]
                }
            ]
        };
    }

    function charts(option, id) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));
        // 指定图表的配置项和数据
        option = option;
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


</script>


</body>
</html>